<template>
    <div class="app-container">
        <div ref="searchForm">
            <el-form :inline="true" :model="formData" class="search-form-inline" size="small">
                <el-form-item label="姓名">
                    <el-input v-model="formData.name" />
                </el-form-item>
                <el-form-item label="登录名">
                    <el-input v-model="formData.loginName" />
                </el-form-item>

                <el-form-item label="用户状态">
                    <el-select v-model="formData.userStatus" collapse-tags>
                        <el-option
                            v-for="item in userStatusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList(1)">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div slot="header" class="clearfix">
            <el-button class="toolbar-btn" @click.native="addOrModify()">新增</el-button>
        </div>
        <elTable ref="dataInfo" :enterSearch="true" :formData="formData" @tableData="getList">
            <el-table-column label="姓名" align="center">
                <template slot-scope="{row}">
                    <el-button type="text" @click="viewUser(row)">{{row.name}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="loginName" label="登录名" align="center"></el-table-column>
            <el-table-column prop="role" label="角色" align="center"></el-table-column>
            <el-table-column prop="belongsDepartment" label="所属部门" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" align="center"></el-table-column>
            <el-table-column prop="telphone" label="联系方式" align="center"></el-table-column>
            <el-table-column prop="belongsShop" label="所属店铺" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="230">
                <template slot-scope="{row,$index}">
                    <el-button type="primary" size="mini" @click.native="addOrModify(row)">修改</el-button>
                    <el-button type="primary" size="mini" @click.native="freeze(row)">锁定</el-button>
                    <el-button type="primary" size="mini" @click.native="restore(row)">恢复</el-button>
                </template>
            </el-table-column>
        </elTable>
        <!-- 新增/修改 -->
        <dialogStaffMessage ref="dialogStaffMessage"></dialogStaffMessage>
    </div>
</template>

<script>
import elTable from "@/components/xForm/elTable";
import dialogStaffMessage from "./dialogStaffMessage";
import apisStaffMessage from "@/api/systemSetting/staffMessage"; //员工管理列表接口
export default {
    name: "staffMessage",
    components: { elTable, dialogStaffMessage, apisStaffMessage },
    data() {
        return {
            formData: {
                name: "",
                userName: "",
                userStatus: "",
                currentPage: 1,
                pageSize: 10,
            },
            userStatusList: [
                {
                    value: "0",
                    label: "管理员",
                },
                {
                    value: "1",
                    label: "财务管理",
                },
            ],
            dataInfo: [],
        };
    },
    mounted() {
        // this.dataInfo = this.$refs.dataInfo;
    },
    methods: {
        getList(pageNo) {
            let _this = this;
            _this.formData.currentPage = pageNo || _this.formData.currentPage;
            let dataInfo = [
                {
                    id: 1,
                    name: "路飞",
                },
                {
                    id: 2,
                    name: "索隆",
                },
            ];
            let total = 10;
            this.$nextTick(() => {
                this.$refs.dataInfo.loadData(dataInfo, total);
            });
            // apisStaffMessage.getStaffMessageList(_this.formData).then((res) => {
            //     _this.dataInfo.loadData(res.data.list, res.data.total);
            // });
        },
        // 新增或修改
        addOrModify(row) {
            this.$refs.dialogStaffMessage.open(row);
        },
        // 锁定
        freeze(row) {
            this.$prompt("请输入锁定原因", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            })
                .then(({ value }) => {})
                .catch(() => {});
        },
        // 恢复
        restore(row) {
            apisStaffMessage.restoreStaffMessage(this, row.id, (d) => {
                this.getList();
            });
        },
    },
};
</script>